<%--
  Created by IntelliJ IDEA.
  User: ZYF
  Date: 2021/4/15
  Time: 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <style>
        #tab {
            width: 650px;

        }
        #tab td{
            position: relative;
        }
        #tab input{
            width: 330px;
        }
        #tab td span{
            position: absolute;
            right: 10px;
            top: 15px;
        }
        /*//!important;样式最优先*/
        tr:not(:last-child) td:nth-child(1){
            background-color: darkgray;
        }
    </style>
</head>
<body>
<form action="booking" method="post">
    <table id="tab" align="center" class="table table-hover table-bordered ">

        <tr>
            <td colspan="5">
                <h1 class="text-center">添加关键词</h1>
            </td>

        </tr>
        <tr>
            <td>预约人姓名（*）</td>
            <td><input id="name" autocomplete="off" placeholder="" type="text" class="form-control"name="name"><span></span>
            </td>

        </tr>
        <tr>
            <td>预约人身份证号（*）</td>
            <td><input type="text"  autocomplete="off" placeholder="" id="cardId" class="form-control" name="cardId"><span id="folg"></span></td>

        </tr>
        <tr>
            <td>预约接种时间（*）</td>
            <td><input type="text" autocomplete="off" placeholder="" id="time" class="form-control" name="date"><span></span></td>

        </tr>
        <tr>
            <td colspan="2" class="text-center">
                <button href="booking?opr=insert">提交</button>
            </td>
        </tr>
    </table>
</form>
<script src="./static/jquery-3.5.1.js"></script>
<script>
    $("#cardId").blur(function(){
        $.ajax({
            url:'booking?opr=check',
            type:'post',
            data:{
                cordId:$("#cardId").val().trim()
            },
            dataType:'text',
            success:function (data) {
                $("#folg").css("color","red");
                if (data=="true"){
                    $("#folg").text('已预约');
                }
            }
        })
    })
    // // $(function (){
    // //     $("#name").blur(function (){
    // //         let flag = check();
    // //         if(flag){
    // //
    // //         }
    // //     })
    // // })
    //
    // $(function (){
    //     // $("#name").val();
    //     // $("#name").select();
    //     //打开网页焦点
    //     // $("#name").focus();
    //     $("form").submit(function (){
    //         let flag = check();
    //         if(flag){
    //             alert("已提交");
    //         }else {
    //             return false;
    //         }
    //     })
    // })
    //
    // function check(){
    //     let flag = true;
    //     if($("#name").val().trim().length == 0){
    //       alert("请填写完整信息")
    //
    //         flag = false;
    //     }else {
    //         flag=true;
    //     }
    //     if($("#cardID").val().trim().length == 0){
    //         alert("请填写完整信息")
    //         flag = false;
    //     }else {
    //         flag=true;
    //
    //     }
    //     if($("#date").val().trim().length == null){
    //         alert("创建时间格式不正确")
    //         flag = false;
    //     }else {
    //             flag = true;
    //     }
    //     return flag;
    // }

</script>
</body>
</html>
